
<template>
	<div>
		<div v-for="(item, index) in list" :key="index" class="container">
			<input type="checkbox" :id="index" v-model="item.checked" />
            <label :for="index">
                {{ item.label }}
            </label>
		</div>
		<div>
			你选中的元素:
			<span v-for="(item, index) in number" :key="index">
				{{ item.label }}, </span
			>累加的值为：{{ getNum }}
		</div>
        <div>选中的元素总和为：{{ list.reduce((pre, current) => (current.checked ? pre + current.label : pre),0)}}</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			list: [9, 13, 56, 2, 3, 4, 6, 8, 10].map((item) => ({
				label: item,
				checked: false,
			})),
			number: [],
		};
	},
	computed: {
		getNum() {
			this.number = this.list.filter((d) => d.checked);
			return this.number.reduce((pre, current) => pre + current.label, 0);
		},
	},
};
</script>
<style scoped>
.container {
	display: inline-block;
	margin-right: 20px;
}
span {
	margin-right: 12px;
}
</style>